<!--菜单区域组件-->
<template>
  <div class="content">
    <div class="content-type">
      文件状态：<span>{{ headType }}</span>
    </div>
    <div class="content-menu">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="temporaryStorage">暂存</el-button>
      <el-button type="primary" @click="approvalRecord">审批记录</el-button>
      <el-button type="primary" @click="processTrace">流程跟踪</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </div>
  <!--提交弹窗-->
  <div class="submitPopUp">
    <el-dialog v-model="submitDialog" title="任务处理" width="800px" draggable center @close="conductorClose">
      <div class="dialog-selectionPath">
        <div class="title">选择路径</div>
        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio :label="item.option" v-for="item in radioLists" :key="item?.option" style="margin-right: 10px">
            {{ item?.option }}
          </el-radio>
        </el-radio-group>
      </div>
      <!--人员-->
      <div class="dialog-personnel">
        <!--单人模式-->
        <template v-if="type === '单人模式'">
          <div class="personnel-title">已选人员</div>
          <div class="personnel-content">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                :label="item.name"
                size="large"
                v-for="item in radioLists[0].personnelList"
                :key="item.userId"
                disabled
                checked
              />
            </el-checkbox-group>
          </div>
        </template>
        <!--多选模式-->
        <template v-else>
          <div class="personnel-title">选择人员</div>
          <div class="personnel-input" @click="selector()">
            <span v-if="personnelList.length === 0" class="input-personnelList">请选择人员</span>
            <el-tag
              v-else
              v-for="item in personnelList"
              :key="item.displayName"
              closable
              class="input-item"
              type="info"
              @close="handleClose(index)"
            >
              {{ item.displayName }}
            </el-tag>
          </div>
        </template>
      </div>
      <!--意见-->
      <div class="dialog-opinion">
        <div class="opinion-left">
          <div class="title">填写意见</div>
          <el-input v-model="textarea" :rows="7" type="textarea" placeholder="请填写意见" class="left-content" />
        </div>
        <div class="opinion-right">
          <div class="title">常用意见</div>
          <div class="right-content" @click="opinionSelection">
            <div class="content-btn" data-title="阅">阅</div>
            <div class="content-btn" data-title="同意">同意</div>
            <div class="content-btn" data-title="不同意">不同意</div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submitDialog = false">关 闭</el-button>
          <el-button type="primary" @click="submissionConfirmation">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!--人员选择弹窗-->
  <PersonnelSelection ref="personnelSelectionDialog" @submit="submit"></PersonnelSelection>
</template>
<script setup>
const props = defineProps({
  headType: {
    //文件状态
    type: String, //数据类型
    required: false, //是否必须
    default: "拟稿", //默认值
  },
});
const radioLists = ref([
  {
    option: "单人模式",
    personnelList: [
      {
        name: "张三",
        userId: "123456",
      },
    ],
  },
  {
    option: "多选模式",
  },
]);
const emit = defineEmits(["close", "temporaryStorage", "approvalRecord", "processTrace", "submitForm"]);
/**
 * 关闭
 * @param e 数据
 */
const close = (e) => {
  emit("close", "关闭");
};
/**
 * 暂存
 * @param e 数据
 */
const temporaryStorage = (e) => {
  emit("temporaryStorage", "暂存");
};
/**
 * 审批记录
 * @param e 数据
 */
const approvalRecord = (e) => {
  emit("approvalRecord", "审批记录");
};
/**
 * 流程跟踪
 * @param e 数据
 */
const processTrace = (e) => {
  emit("approvalRecord", "流程跟踪");
};
/**
 * 提交
 */
const submitForm = () => {
  submitDialog.value = true; //打开提交弹窗
};
/**
 * 提交弹窗数据
 */
const textarea = ref(""); //填写意见
const submitDialog = ref(false); //提交弹窗状态
const radio = ref("单人模式"); //选择路径
const checkList = ref([]); //人员选项
const personnelList = ref([]); //人员列表
const personnelSelectionDialog = ref(); //人员选择弹窗
// 根据选项过滤
const type = ref("单人模式"); //默认单人模式
/**
 * 选项切换
 */
const changeRadio = (e) => {
  type.value = e;
};
/**
 * 提交弹窗关闭
 */
const conductorClose = () => {
  textarea.value = "";
};
/**
 * 常用意见按钮
 * @param e 选择的意见
 */
const opinionSelection = (e) => {
  textarea.value = e.target.dataset.title;
};
/**
 * 确认事件
 */
const submissionConfirmation = () => {
  submitDialog.value = false;
};
/**
 * 人员选择弹窗
 */
import PersonnelSelection from "@/components/flowDemo/PersonnelSelectionDialog.vue";
/**
 * 打开人员选择弹窗
 */
const selector = () => {
  personnelSelectionDialog.value.showDialog(true);
};
/**
 * 人员选择弹窗提交
 * @param value 数据
 */
const submit = (value) => {
  personnelList.value = value;
};
/**
 * 多选模式的人员删除
 * @param index 删除的下标
 */
const handleClose = (index) => {
  personnelList.value.splice(index, 1);
};
</script>

<style scoped lang="less">
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 24px;
  border-bottom: 8px solid #ebf6fe;
  .content-type {
    span {
      color: #309df0;
    }
  }
  .content-menu {
    display: flex;
  }
}
//提交弹窗
.submitPopUp {
  //标题
  .title {
    font-size: 17px;
    font-weight: 600;
    border-bottom: 3px solid #2f87d0;
  }
  //人员选择
  .dialog-personnel {
    border: 1px solid #c3c3c3;
    width: 100%;
    min-height: 150px;
    margin-bottom: 20px;
    padding: 5px;
    .personnel-title {
      font-size: 15px;
    }
    .personnel-content {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
    }
    .personnel-input {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 10px;
      border: 1px solid #c3c3c3;
      padding: 5px 10px;
      cursor: pointer;
      min-height: 30px;
      .input-personnelList {
        color: #c3c3c3;
      }
    }
  }
  //意见
  .dialog-opinion {
    width: 100%;
    display: flex;
    column-gap: 10px;
    .opinion-left {
      flex: 2;
      .left-content {
        margin-top: 10px;
      }
    }
    .opinion-right {
      flex: 1;
      .right-content {
        margin-top: 10px;
        height: 156px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        .content-btn {
          min-width: 70px;
          height: 30px;
          display: flex;
          justify-content: start;
          padding-left: 10px;
          align-items: center;
          cursor: pointer;
          &:hover {
            background-color: #eee;
          }
        }
      }
    }
    textarea {
      min-height: 150px;
    }
  }
}
</style>
